<template>
  <!-- 快捷定位弹窗 -->
  <div class="positionDialog" v-show="isPositionShow">
    <transition name="el-zoom-in-top">
      <div class="positonBar" v-show="hideBarFromvuex">
        <div class="position-item" tabindex="0" @click="handleDialog(1)">
          <div class="position-icon">
            <i class="iconfont icon-feedback"></i>
          </div>
          <div class="position-text">地图书签</div>
        </div>
        <div class="position-item" tabindex="0" @click="handleDialog(2)">
          <div class="position-icon"><i class="iconfont icon-legend"></i></div>
          <div class="position-text">地名搜索定位</div>
        </div>
        <div class="position-item" tabindex="0" @click="handleDialog(3)">
          <div class="position-icon">
            <i class="iconfont icon-eagleeye"></i>
          </div>
          <div class="position-text">兴趣点搜索定位</div>
        </div>
        <div class="position-item" tabindex="0" @click="handleDialog(4)">
          <div class="position-icon">
            <i class="iconfont icon-eagleeye"></i>
          </div>
          <div class="position-text">多坐标定位</div>
        </div>
        <div class="position-item" tabindex="0" @click="handleDialog(5)">
          <div class="position-icon">
            <i class="iconfont icon-eagleeye"></i>
          </div>
          <div class="position-text">多关键字定位</div>
        </div>
      </div>
    </transition>
    <BookMarkDialog
      v-if="isMarkDialogShow"
      @update:dialogVisible="isMarkDialogShow = $event"
    ></BookMarkDialog>
    <CoordinatePosition
       v-if="isCoordinateShow"
      :dialogVisible="isCoordinateShow"
      @update:dialogVisible="isCoordinateShow = $event"
    ></CoordinatePosition>
    <PlacePosition
       v-if="isPlaceShow"
      :dialogVisible="isPlaceShow"
      @update:dialogVisible="isPlaceShow = $event"
    ></PlacePosition>
    <KeyWordsSearch
      v-if="isKeyWordsShow"
      @closeThis="isKeyWordsShow = $event"
    ></KeyWordsSearch>
    <POISearch
       v-if="isPOISearchShow"
      :dialogVisible="isPOISearchShow"
      @update:dialogVisible="isPOISearchShow = $event"
    ></POISearch>
  </div>
</template>

<script>
import BookMarkDialog from "./components/BookMark.vue";
import CoordinatePosition from "./components/CoordinatePosition.vue";
import PlacePosition from "./components/PlacePosition.vue";
import KeyWordsSearch from "./components/KeyWordsSearch.vue";
import POISearch from "./components/POISearch.vue";
export default {
  name: "OPositionBar",
  components: {
    BookMarkDialog,
    CoordinatePosition,
    PlacePosition,
    KeyWordsSearch,
    POISearch,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      hideBar: true,
      isMarkDialogShow: false,
      isCoordinateShow: false,
      isPlaceShow: false,
      isKeyWordsShow: false,
      isPOISearchShow: false,
    };
  },
  computed: {
    isPositionShow() {
      // 返回 prop 的值
      return this.dialogVisible;
    },
    hideBarFromvuex() {
      return this.$store.state.isPositionShow;
    },
  },

  methods: {
    handleDialog(index) {
      this.$store.commit("setisPositionShow", false);
      switch (index) {
        case 1:
          this.isMarkDialogShow = !this.isMarkDialogShow;
          this.isPlaceShow = false;
          this.isKeyWordsShow = false;
          this.isPOISearchShow = false;
          this.isCoordinateShow = false;
          break;
        case 2:
          this.isMarkDialogShow = false;
          this.isPlaceShow = !this.isPlaceShow;
          this.isKeyWordsShow = false;
          this.isPOISearchShow = false;
          this.isCoordinateShow = false;
          break;
        case 3:
          this.isMarkDialogShow = false;
          this.isKeyWordsShow = false;
          this.isPOISearchShow = !this.isPOISearchShow;
          this.isPlaceShow = false;
          this.isCoordinateShow = false;
          break;
        case 4:
          this.isMarkDialogShow = false;
          this.isKeyWordsShow = false;
          this.isPOISearchShow = false;
          this.isPlaceShow = false;
          this.isCoordinateShow = !this.isCoordinateShow;
          break;
        case 5:
          this.isMarkDialogShow = false;
          this.isKeyWordsShow = !this.isKeyWordsShow;
          this.isPOISearchShow = false;
          this.isPlaceShow = false;
          this.isCoordinateShow = false;
          break;
        default:
      }
    },
    hideAllItem() {
      this.isMarkDialogShow = false;
      this.isPlaceShow = false;
      this.isKeyWordsShow = false;
      this.isPOISearchShow = false;
      this.isCoordinateShow = false;
    },
  },
  mounted() {
    this.hideAllItem();
  },
  beforeDestroy() {
    this.hideAllItem();
  },
};
</script>

<style lang="scss" scoped>
//快捷定位弹窗样式
.positionDialog {
  z-index: 2;
  font-size: 0.8rem;
  //   background-color: #285383;
  color: white;
  //   padding: 10px;
  position: absolute;
  top: 100%;
  width: 165px;
  box-sizing: border-box;

  .position-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 8px;
  }
  .positonBar {
    background-color: #285383;
  }
  // .position-item:hover {
  //     background-color: #4998f2;
  // }
  .position-item:focus {
    background-color: #4998f2;
  }
  .position-item:hover {
    background-color: #4998f2;
  }
}
</style>
